<script setup>
import LayoutHeader from '@/views/Layout/components/LayoutHeader.vue'
import { addOrderAPI } from '@/apis/order'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const cencel = () => {
  console.log('cencel')
}
const submitForm = () => {
  formData.value.orderId=orderId.value
  formData.value.userId= '5'
  formData.value.roomId= '9ba947083bc946939270'
  formData.value.orderStatus= 3
  formData.value.orderComments= comment.value,
  formData.value.star= 10
  formData.value.orderTime= orderTime.value * 60 * 60
  formData.value.startTime= startTime.value
  formData.value.endTime= endTime.value
  formData.value.isDelete = 0
  formData.value.orderPrice = orderTime.value * 20
  addOrderAPI(formData.value)
  router.replace('/waitPage')
}

const orderTime = ref(1)

const orderId = ref('')

const generateUUID = () => {
  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c)=> {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  })
  return uuid.replace(/-/g, '').substring(0, 20)
}
const commentsArray = [
"这个共享厨房项目太棒了！设备先进，环境干净整洁，非常方便！",
"共享厨房的概念真是太好了！节省了我很多时间和精力，还能结交新朋友！",
"厨房设备齐全，卫生清洁，管理规范，让我在繁忙的生活中享受美食的乐趣！",
"共享厨房项目提供了一个交流和学习的平台，我在这里学到了很多烹饪技巧！",
"共享厨房的价格实惠，无需购买昂贵的厨具，大大降低了我的生活成本！",
"这个共享厨房项目的管理团队非常专业，服务态度好，让我感到很放心！",
"共享厨房的环境非常温馨舒适，有家的感觉，每次来都让我心情愉悦！",
"共享厨房项目的定位很准确，满足了我对于自己独立烹饪的需求，非常满意！",
"在共享厨房里，我结识了很多志同道合的朋友，一起分享美食，增进了友谊！",
"这个共享厨房项目的位置便利，交通方便，让我能够轻松前往烹饪美食！",
]
const startTime = ref('')
const endTime = ref('')
const comment = ref('')


const nowTime = () => {
  // 创建一个 Date 对象，表示当前时间
const now = new Date()
// 获取当前时间的年、月、日、时、分、秒
const year = now.getFullYear()
const month = now.getMonth() + 1 // 月份是从 0 开始计数的，所以要加 1
const day = now.getDate()
const starthours = now.getHours()
const endhours = now.getHours() + 1
const minutes = now.getMinutes()
const seconds = now.getSeconds()
startTime.value = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${starthours < 10 ? '0' + starthours : starthours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`
endTime.value = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${endhours < 10 ? '0' + endhours : endhours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`
}


const formData = ref({
  orderId: orderId.value,
  userId: '5',
  roomId: '9ba947083bc946939270',
  orderStatus: 3,
  orderComments: comment.value,
  star: 10,
  orderTime: orderTime.value * 60 * 60,
  startTime: startTime.value,
  endTime: endTime.value,
  isDelete: 0,
  orderPrice: 20,
})


onMounted(() => {
  orderId.value = generateUUID()
  comment.value = commentsArray[Math.floor(Math.random() * commentsArray.length)]
  nowTime()
  
})
const changeTime = () => {
  if (orderTime.value < 1) {
    orderTime.value = 1
  }
  nowTime()
}

</script>
<template>
  <div class="common-layout">
    <div id="main">
      <div id="header"><LayoutHeader></LayoutHeader></div>
      <div id="contain">
        <el-descriptions
    title="您的订单信息"
    :column="1"
    size="large"
    direction="horizontal"
    :style="blockMargin"
  >
    <el-descriptions-item><div class="order"><h1>订单编号：</h1><br><span>{{orderId}}</span></div></el-descriptions-item>
    <el-descriptions-item><div class="order"><h1>持续时间(1h/20￥)：</h1><br><div class="slider-demo-block">
    <el-slider v-model="orderTime" show-input max="12" @change="changeTime"/>
  </div></div></el-descriptions-item>
  <el-descriptions-item><div class="order"><h1>开始时间：</h1><br><span id="start">{{startTime }}</span></div></el-descriptions-item>
  <el-descriptions-item><div class="order"><h1>结束时间：</h1><br><span id="end">{{endTime }}</span></div></el-descriptions-item>
  <el-descriptions-item><div class="order"><h1>花费总额：</h1><br><span id="time">{{ orderTime * 20 }}￥</span></div></el-descriptions-item>
  <el-descriptions-item><div class="order"><el-button type="primary" @click="submitForm">提交订单</el-button><el-button type="danger" @click="cencel">取消订单</el-button></div></el-descriptions-item>
  </el-descriptions>
      </div>
    </div>
  </div>
</template>
<style scoped>


#header {
  height: 100px;
  border: 0 solid #ffff;
  border-bottom-width: 1px;
  border-image: linear-gradient(to right, #ffff, #f4f6f8);
  border-image-slice: 1;
  background-color: #ffff;
}
#main {
  background-color: #f4f6f8;
  margin: auto;
  width: 70%;
  height: 100%;
  border-radius: 5px;
}
.common-layout {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffff;
}
#contain {
  padding-top: 3%;
  width: 80%;
  margin: auto;
  
}
span {
    font-size: 30px;
}

#start {
  color: green;
}

#end {
  color: red;
}

#time {
  color: rgb(200, 205, 50);
}

.order{
  margin: 30px 30px 0px 30px;
}

</style>
